<template>
  <v-dialog
    v-model="visible"
    width="300"
  >
    <v-card title="身份码">
      <v-card-text>
        <div class="text-sm mb-2">
          <a target="_blank" href="https://open-live.bilibili.com/document/5dffc297-6fd2-41ff-bd45-6e8b89e2a68e#%E8%BA%AB%E4%BB%BD%E7%A0%81%E7%9B%B8%E5%85%B3%E9%97%AE%E9%A2%98">去获取</a>
        </div>
        <v-text-field
          v-model="code"
          density="compact"
          variant="solo"
          label="请输入身份码"
          single-line
          hide-details
        ></v-text-field>
      </v-card-text>
      <v-card-actions>
        <v-btn color="primary" block @click="confirm">确定</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script lang="ts" setup>
import {ref,watch} from 'vue';
import {useVModel} from '@/hooks/useVModel';
import { useBiliStore } from '@/stores/bili';

const props=defineProps<{
  modelValue:boolean;
}>()
const emit=defineEmits<{
  (e: 'update:modelValue'): void;
  (e: 'confirm'):void;
}>()

const biliStore=useBiliStore();
const visible=useVModel(props,'modelValue',emit);
const code=ref(biliStore.code);

watch(() => biliStore.code,(val) =>{
  code.value=val;
})
const confirm=() =>{
  visible.value=false;
  biliStore.code=code.value;
}
</script>

<style scoped>

</style>